<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        h1 {
            text-align: center;
        }

        table {
            border: 1px solid #ccc;
            width: 600px;
            height: 400px;
            border-spacing: 0px;
            border-collapse: collapse;
            margin: auto;
        }

        table td {
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
    </head>

    <body>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>英语</th>
                    <th>总成绩</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody id="content">
                <!-- <tr>
                <td>2</td>
                <td>89</td>
                <td>78</td>
                <td>120</td>
                <td>287</td>
                <td>英语成绩最高</td>
            </tr> -->
            </tbody>
        </table>
        <script>
            //  创建学生成绩数组储存信息
            var students = [
                { xuehao: 1, chinese: 105, math: 62, english: 118 },
                { xuehao: 2, chinese: 89, math: 78, english: 120 },
                { xuehao: 3, chinese: 86, math: 64, english: 91 },
                { xuehao: 4, chinese: 78, math: 99, english: 91 },
                { xuehao: 5, chinese: 107.5, math: 97, english: 70 },
                { xuehao: 6, chinese: 112, math: 61, english: 92 },
                { xuehao: 7, chinese: 101, math: 79, english: 104 },
                { xuehao: 8, chinese: 71, math: 72, english: 105 },
                { xuehao: 9, chinese: 56, math: 68, english: 61 },
                { xuehao: 10, chinese: 98, math: 83, english: 77 }
            ]
            //  动态添加总成绩
            for (var j = 0; j < students.length; j++) {
                var total = students[j].chinese + students[j].math + students[j].english
                students[j].total = total
            }

            //  根据语文成绩排序，并提取最高的语文成绩
            students.sort(function(a, b) {
                return b.chinese - a.chinese
            })
            var maxChinese = students[0].chinese

            //  根据数学成绩排序，并提取最高的数学成绩
            students.sort(function(a, b) {
                return b.math - a.math
            })
            var maxMath = students[0].math

            //  根据英语成绩排序，并提取最高的英语成绩
            students.sort(function(a, b) {
                return b.english - a.english
            })
            var maxenglish = students[0].english

            //根据总成绩从大到小排序
            students.sort(function(a, b) {
                return b.total - a.total
            })
            for (var i = 0; i < students.length; i++) {
                var tips = ''
                if (students[i].chinese === maxChinese) {
                    tips = '语文成绩最高'
                } else if (students[i].math === maxMath) {
                    tips = '数学成绩最高'
                } else if (students[i].english === maxenglish) {
                    tips = '英语成绩最高'
                }
                content.innerHTML += '<tr>' +
                    '<td>' + students[i].xuehao + '</td>' +
                    '<td>' + students[i].chinese + '</td>' +
                    '<td>' + students[i].math + '</td>' +
                    '<td>' + students[i].english + '</td>' +
                    '<td>' + students[i].total + '</td>' +
                    '<td>' + tips + '</td>' +
                    '</tr > '
            }
        </script>
    </body>

</html>